@model List<HDLogCenter.Infrastructure.Models.AppConfigModel>
@{
    ViewData["Title"] = "项目配置";
}

<div class="layui-card">
    <div class="layui-card-header">
        <div class="layui-row">
            <div class="layui-col-md6">
                <h2>项目配置管理</h2>
            </div>
            <div class="layui-col-md6" style="text-align: right;">
                <a href="/Project/Create" class="layui-btn layui-btn-normal">
                    <i class="layui-icon layui-icon-add-1"></i> 新增项目
                </a>
            </div>
        </div>
    </div>
    <div class="layui-card-body">
        <!-- 项目列表表格 -->
        <table id="projectTable" lay-filter="projectTable"></table>
    </div>
</div>

<!-- 表格工具栏 -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="refresh">
            <i class="layui-icon layui-icon-refresh"></i> 刷新
        </button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDelete">
            <i class="layui-icon layui-icon-delete"></i> 批量删除
        </button>
    </div>
</script>

<!-- 操作列 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="alertRules">报警规则</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="delete">删除</a>
</script>

<!-- 状态列 -->
<script type="text/html" id="statusTpl">
    {{# if(d.status == 1){ }}
        <span class="layui-badge layui-bg-green">启用</span>
    {{# } else { }}
        <span class="layui-badge layui-bg-gray">禁用</span>
    {{# } }}
</script>

<!-- 日志级别列 -->
<script type="text/html" id="logLevelTpl">
    {{# if(d.logLevel === 'Error'){ }}
        <span class="layui-badge layui-bg-red">{{d.logLevel}}</span>
    {{# } else if(d.logLevel === 'Warning'){ }}
        <span class="layui-badge layui-bg-orange">{{d.logLevel}}</span>
    {{# } else if(d.logLevel === 'Information'){ }}
        <span class="layui-badge layui-bg-blue">{{d.logLevel}}</span>
    {{# } else { }}
        <span class="layui-badge layui-bg-gray">{{d.logLevel}}</span>
    {{# } }}
</script>

<!-- 快速修改日志级别 -->
<script type="text/html" id="quickLogLevelTpl">
    <div class="layui-btn-group">
        <button class="layui-btn layui-btn-xs" onclick="quickUpdateLogLevel({{d.id}}, 'Trace')">Trace</button>
        <button class="layui-btn layui-btn-xs" onclick="quickUpdateLogLevel({{d.id}}, 'Debug')">Debug</button>
        <button class="layui-btn layui-btn-xs" onclick="quickUpdateLogLevel({{d.id}}, 'Information')">Info</button>
        <button class="layui-btn layui-btn-xs" onclick="quickUpdateLogLevel({{d.id}}, 'Warning')">Warn</button>
        <button class="layui-btn layui-btn-xs" onclick="quickUpdateLogLevel({{d.id}}, 'Error')">Error</button>
    </div>
</script>

@section Scripts {
    <script>
        layui.use(['table', 'layer'], function(){
            var table = layui.table;
            var layer = layui.layer;
            // 表格渲染
            table.render({
                elem: '#projectTable',
                data: @Html.Raw(Json.Serialize(Model)),
                toolbar: '#toolbarDemo',
                defaultToolbar: ['filter', 'exports', 'print'],
                cols: [[
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'id', title: 'ID', width: 80, sort: true},
                    {field: 'appName', title: '项目名称', width: 150},
                    {field: 'appCode', title: '项目编码', width: 120},
                    {field: 'notifyWebhook', title: '钉钉通知地址', width: 200},
                    {field: 'notifyPhone', title: '通知手机号', width: 200},
                    {field: 'description', title: '描述', width: 250},
                    {field: 'status', title: '状态', width: 100, templet: '#statusTpl'},
                    {field: 'createTime', title: '创建时间', width: 180, templet: function(d){
                        return d.createTime ? new Date(d.createTime).toLocaleString() : '';
                    }},
                    {title: '快速修改', width: 300, templet: '#quickLogLevelTpl'},
                    {title: '操作', toolbar: '#barDemo', width: 150, fixed: 'right'}
                ]],
                page: true,
                limit: 20,
                limits: [10, 20, 50, 100],
                height: 'full-200'
            });
            
            // 表格工具栏事件
            table.on('toolbar(projectTable)', function(obj){
                if(obj.event === 'refresh'){
                    location.reload();
                } else if(obj.event === 'batchDelete'){
                    var checkStatus = table.checkStatus('projectTable');
                    var data = checkStatus.data;
                    if(data.length === 0){
                        layer.msg('请选择要删除的项目');
                        return;
                    }
                    layer.confirm('确定要删除选中的 ' + data.length + ' 个项目吗？', function(index){
                        // 执行批量删除
                        var ids = data.map(function(item){ return item.id; });
                        // 这里调用删除API
                        layer.close(index);
                    });
                }
            });
            
            // 行工具事件
            table.on('tool(projectTable)', function(obj){
                var data = obj.data;
                if(obj.event === 'edit'){
                    window.location.href = '/Project/Edit/' + data.id;
                } else if(obj.event === 'alertRules'){
                    window.location.href = '/Project/AlertRules/' + data.id;
                } else if(obj.event === 'delete'){
                    layer.confirm('确定要删除项目 "' + data.appName + '" 吗？', function(index){
                        $.post('/Project/Delete/' + data.id, function(result){
                            if(result.success){
                                obj.del();
                                layer.msg('删除成功');
                            } else {
                                layer.msg('删除失败');
                            }
                        });
                        layer.close(index);
                    });
                }
            });
        });
        
        // 快速更新日志级别
        function quickUpdateLogLevel(projectId, logLevel) {
            $.post('/Project/UpdateLogLevel', { projectId: projectId, logLevel: logLevel }, function(result){
                if(result.success){
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('更新成功');
                        setTimeout(function(){
                            location.reload();
                        }, 1000);
                    });
                } else {
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('更新失败');
                    });
                }
            });
        }
        
        // 切换项目状态
        function toggleProjectStatus(projectId) {
            $.post('/Project/ToggleStatus', { projectId: projectId }, function(result){
                if(result.success){
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('状态更新成功');
                        setTimeout(function(){
                            location.reload();
                        }, 1000);
                    });
                } else {
                    layui.use('layer', function(){
                        var layer = layui.layer;
                        layer.msg('状态更新失败');
                    });
                }
            });
        }
    </script>
}
